<template>
  <div class="Hot_search">
      <p>热门搜索</p>
      <div class="lable_list">
          <a class="lable_item" href="javaScript:void(0)" 
             v-for="(item,index) in hot_search" 
             :key="index"
             @click="$emit('getData',item.first)"
          >{{item.first}}</a>
      </div>
      <Loading v-if="hot_search == 0"></Loading>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
// import Loading from './Loading.vue';

export default {
  name: "Hot_search",
  props:{
      hot_search:Array,
      default:function(){
          return []
      }
  },
  components:{
      Loading,
  },
  data(){
     return {
      Loading,

     };

  }
};
</script>
<style lang="less" scoped>
    .Hot_search {
        padding: 15px 10px 0;
        p{
            font-size: 12px;
            line-height: 12px;
            color: #666;
        }
        .lable_list {
            margin: 10px 0 7px;
            display: flex;
            flex-wrap: wrap;
            // height: 30px;
            a {
                text-decoration: none;
                box-sizing: border-box;
                margin-right: 6px;
                margin-bottom: 6px;
                padding: 0 12px;
                line-height: 30px;
                font-size: 14px;
                color: #333;
                border: 1px solid #d3d4da;
                border-radius: 32px;
                cursor: pointer;
            }
        }

    }
</style>